<template>
  <section class="relative z-[1]">
    <!-- <div
      class="lg:max-w-[1168px] mx-0 lg:mx-10 xl:mx-auto mb-10 rounded-xl py-6 px-16 bg-[#FEF2F2] text-[#B91C1C] text-sm text-center"
      style="margin-top: -200px"
    >
      <div class="flex justify-center">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11V14C9 14.5523 9.44772 15 10 15H11C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13V10C11 9.44772 10.5523 9 10 9H9Z"
            fill="#B91C1C"
          ></path></svg
        >
        <span class="pl-2 font-bold text-base">温馨提示</span>
      </div>
      <div class="mt-2">
        Contact number: (0898) 38218621, Customer service QQ: 3579179004, 3165727040
        In response to the new policy of the State Administration for Market Regulation, Lucksec has published the probability of winning physical goods in the "Box Contents" section in accordance with the "Guidelines for the Operation of Blind Box Activities (Trial) (Draft for Solicitation of Comments)".
        <a
          class="text-[#2a3bce]"
          href="https://mp.weixin.qq.com/s/TVWCMUHUdmjClalS0cQn8A"
        >
          "Guidelines for the Operation of Blind Box Activities (Trial) (Draft for Solicitation of Comments)"
        </a>
        Lucksec has published the winning probability of the in-built physical goods in the Box Contents section
      </div>
    </div> -->
    <div
      class="bg-white lg:max-w-[1168px] mx-0 lg:mx-10 xl:mx-auto -mt-0 rounded p-2 pb-10 lg:p-[50px]"
    >
      <section class="mt-0">
        <!---->
        <div>
          <div
            class="relative grid grid-cols-2 md:grid-cols lg:grid-cols-4 gap-2 lg:gap-7"
          >
            <div
              class="aspect-w-1 aspect-h-1"
              v-for="(item, index) in proList"
              :key="index"
            >
              <router-link
                :to="`/box?id=${item.id}`"
                class="block text-black-85 w-full bg-no-repeat bg-cover bg-center rounded border-b-4 overflow-hidden shadow-sm cursor-pointer hover:shadow-yellow border-rarities-7"
                :style="`background-image: url(${item.box_banner_images})`"
                ><div class="text-xs sm:text-sm font-bold mt-2 ml-1 mr-[50%]">
                  {{ item.box_name }}
                </div>
                <div
                  class="inline-block bg-yellow font-bold text-xs sm:text-sm px-2.5 py-1 rounded-sm absolute -right-1 top-2"
                >
                  Ł {{ item.price }}
                </div>
                <div
                  class="bg-black-30 text-xs px-2 lg:px-6 py-0.5 rounded-sm text-white inline-block bottom-2 absolute left-[50%] -translate-x-2/4 whitespace-nowrap"
                >
                  726747人已开箱
                </div>
              </router-link>
            </div>
            <!---->
          </div>
        </div>
      </section>
      <div class="mt-10 text-center">
        <router-link to="/all-boxes" class="">
          <button
            type="button"
            class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary"
          >
            <div>Shop 50+ more mystery boxes</div>
            <!---->
          </button>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ["proList"],
};
</script>

<style></style>
